<template>
  <div class="channel-anal">

    <div class="terms">
      <!-- <div>
        <span>对比分析维度：</span>
        <el-select size="small" style="width: 150px;" v-model="group_by">
            <el-option value="union_id" label="渠道"></el-option>
            <el-option value="version" label="版本"></el-option>
        </el-select>
      </div> -->
      <el-form ref="queryForm" class="query-form mt10" :model="queryParams" inline>
      <el-form-item label="项目" prop="app_id">
        <el-select size="small" style="width: 150px;" v-model="queryParams.app_id" @change="proChange">
          <el-option v-for="item in permission_projectList" :value="item.app_id" :label="item.name" :key="item.app_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道" prop="union_id">
        <select-check-box v-model="queryParams.union_id" :selOptions="channelOpts" :props="{value:'channel_id',label:'name'}" doubleColumn checkAllLabel="全部渠道" filterable>
        </select-check-box>
      </el-form-item>
      <el-form-item label="权益包" prop="attr_id">
        <select-check-box v-model="queryParams.attr_id" :selOptions="packageOpts" checkAllLabel="全部业务"/>
      </el-form-item>
      <el-form-item label="版本" prop="version">
        <version-select ref="versionSelect" :selOptions="versionOpts" isIntVer v-model="queryParams.version"></version-select>
      </el-form-item>
      <el-form-item label="时间" prop="time_range">
        <el-date-picker type="daterange" size="small" v-model="queryParams.time_range" placeholder="选择时间" :clearable="false" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
          size="small"
          @click="init">搜索</el-button>
      </el-form-item>
    </el-form>
    </div>

    <div class="scroll">
      <div class="section section1">
      <div class="headline">
        <h5 class="title">{{group_bys==='union_id'?'渠道':'版本'}} | 交易情况</h5>
        <el-radio-group v-model="userDataView" size="small" @change="userDataViewChange">
          <el-radio-button :label="1">分布图</el-radio-button>
          <el-radio-button :label="2">趋势图</el-radio-button>
        </el-radio-group>
      </div>
      <div class="condition" v-show="userDataView===1">
            <custom-indicator v-model="queryParams1.indicator" :options="indicatorOpts" @change="userDataViewChange" />
          </div>
      <div class="content" v-loading="loading1">
        <div class="trade-stats" v-show="userDataView===1">
          <div class="trade-chunk" v-for="(item,index) in tradeDataList" :key="index">
            <channel-ranking :data="item" @detail="viewDetails" />
          </div>
        </div>
        <div v-if="userDataView===2"  v-loading="loading1">
          <el-cascader size="small" v-model="queryParams1.chartIndicator" :options="indicatorOpts" :props="{ emitPath:false }" collapse-tags :show-all-levels="false" popper-class="indicator" @change="renderUserDataLine"></el-cascader>
          <LineMarker :dataObj="lineOption" id="userDataLine"></LineMarker>
        </div>
      </div>
    </div>
    <div class="section section2">
      <div class="headline">
        <h5 class="title">{{group_bys==='union_id'?'渠道':'版本'}} | 付费分析</h5>
      </div>
      <div class="content">
        <div class="pay-rank">
          <div class="pay-rank_chunk" v-for="item in payDataList" :key="item.label">
            <div class="title">{{item.label}}</div>
            <div class="rank-list">
              <div class="rank-list_item" v-for="(it,i) in item.data" :key="it.name">
                <svg-icon :iconClass="`crown-${i+1}`" />
                <span>{{it.name}}</span>
              </div>
            </div>
          </div>
          <div class="label"></div>
        </div>
        <div class="pay-table">
          <table-list v-loading="loading2" :data="payTableList" :columns="tableKeys2" :max-height="400" :row-class-name="rowClassName" :cell-class-name="cellClassName" key="dddd" @cell-click="(row, column, cell, event)=>cellClickHandler(row, column, cell, event,2)" @sort-change="sortChange($event,2)" />
        </div>
      </div>
    </div>
    <div class="section section3">
      <div class="headline">
        <h5 class="title">{{group_bys==='union_id'?'渠道':'版本'}} | 用户规模及质量</h5>
      </div>
      <div class="user-stats">
        <pie-chart-group :data="userDataList" />
      </div>
      <div class="user-table">
        <table-list v-loading="loading3" :data="userTableList" :columns="tableKeys3" :max-height="400" :row-class-name="rowClassName" :cell-class-name="cellClassName" @cell-click="(row, column, cell, event)=>cellClickHandler(row, column, cell, event,3)" @sort-change="sortChange($event,3)" />
      </div>
    </div>
    <!-- 详情 -->
    <channel-detail :visible.sync="detail.visible" :title="detail.title" :params="detail.params" :tableKeys="detail.tableKeys" :packageOpts="packageOpts" :indicatorOpts="indicatorList" width="62%" :fileName="detail.fileName" />
    </div>
  </div>
</template>

<script type="text/javascript">
import Mixin from './mixin'
import Axios from 'axios'
import { mapGetters } from 'vuex'
import LineMarker from '@/components/Charts/LineMarker'
import { getOverview } from '@/utils/database'
import { getVersionTree } from '@/api'
import { getIndicators, getReportDatas } from '@/api/report/index'
import { getRightPackage, listRightPackage } from '@/api/rights/package'
import ChannelRanking from './components/channelRanking.vue'
import ChannelDetail from './components/channelDetail.vue'
import TableList from './components/tableList.vue'
import { parseTime, toFixed } from '@/utils/index'
import CustomIndicator from './components/customIndicator.vue'
import PieChartGroup from './components/pieChartGroup.vue'
import { DATE_TYPE, EXINDICATORS } from './constant'
import { getChannelByAppId } from '@/api/system/channel'
// 付费分析指标
const payIndicator = ['激活注册率', '注册付费率', '付费用户数', '交易客单价', '交易总额']
const payColumns = ['激活用户数', '注册用户数', '付费用户数', '交易客单价', '交易总额', '注册付费率', '试用中付费人数', '试用后付费人数']
// 用户分析指标
const userColumns = ['安装用户数', '激活用户数', '注册用户数', '试用用户数', '付费用户数', '复购用户数', '过期会员数']
const dateFmt = '{y}-{m}-{d}'
export default {
  name: 'ChannelAnal',
  mixins: [Mixin],
  components: {
    ChannelRanking,
    CustomIndicator,
    ChannelDetail,
    TableList,
    PieChartGroup,
    LineMarker
  },
  props: {

  },
  data () {
    const d = new Date()
    d.setDate(d.getDate() - 1)
    const end = parseTime(d, dateFmt)
    const start = parseTime(d.setDate(d.getDate() - 7), dateFmt)
    return {
      group_by: 'union_id',
      group_bys: '',
      userDataView: 2, // 渠道 | 交易情况 1分布图,2趋势图
      versionOpts: [],
      queryParams: {
        app_id: null,
        attr_id: [],
        union_id: [],
        indicator: [],
        time_range: [start, end],
        time_grain_sqla: DATE_TYPE.DAY,
        version: []
      },
      queryParams1: {
        indicator: [],
        chartIndicator: null
      },
      queryParams2: { },
      queryParams3: { },
      loading1: false,
      loading2: false,
      loading3: false,
      tradeDataList: [], // 交易情况数据
      payDataList: [], // 付费分析数据
      payTableList: [], // 付费分析表格数据,
      userDataList: [],
      userTableList: [], // 用户质量分析表格
      detail: {
        title: '渠道详情',
        width: '50%',
        tableKeys: [],
        params: {},
        visible: false,
        fileName: ''
      },
      lineOption: {},
      indicatorOpts: [],
      logicOpts: [],
      allpackages: [], // 权益包
      channelOpts: [],
      channelMap: {},
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > new Date().setHours(0, 0, 0, 0)
        },
        shortcuts: [{
          text: '过去3日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 3)
            end.setDate(end.getDate() - 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去8日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 8)
            end.setDate(end.getDate() - 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去15日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 15)
            end.setDate(end.getDate() - 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去30日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 30)
            end.setDate(end.getDate() - 1)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  async created () {
    let list = this.permission_projectList.map(item => item.app_id)
    this.metricsGroup = await getOverview()
    Axios.all([getIndicators(), getChannelByAppId({ app_ids: list.join(',') })]).then(Axios.spread((res1, res2) => {
      const indicatorOpts = []
      const indicators = []
      this.indicatorSort(res1.data).map(item => {
        ['交易总额', '交易笔数', '付费用户数', '注册付费率'].includes(item.name) && indicators.push(item.ID)
        const obj = {
          category: item.category,
          value: item.ID,
          label: item.name,
          describe: item.describe,
          totalHide: EXINDICATORS.includes(item.name) // 隐藏总数数据展示
        }
        const it = indicatorOpts.find(t => t.label === obj.category)
        if (it) {
          it.children.push(obj)
        } else {
          indicatorOpts.push({
            value: -indicatorOpts.length - 1,
            label: obj.category,
            children: [obj]
          })
        }
      })
      this.indicatorOpts = indicatorOpts
      const channelList = (res2.data.list || []).map(item => {
        item.name = `${item.name}(${item.channel_id})`
        return item
      })
      this.channelList = channelList
      this.channelMap = channelList.reduce((obj, t) => {
        obj[t.channel_id] = t.name
        return obj
      }, {})
      this.queryParams1.indicator = indicators
      this.queryParams1.chartIndicator = indicators[0]
      if (this.permission_projectList.length) {
        this.queryParams.app_id = this.permission_projectList[0].app_id
        this.proChange(this.queryParams.app_id)
      }
      this.getAllRights()
      this.init()
    }))
  },
  methods: {
    async init () {
      this.group_bys = this.group_by
      await this.userDataViewChange()
      await this.renderPayMsa()
      this.renderUserMsa()
    },
    userDataViewChange () {
      if (this.userDataView === 1) {
        this.renderTradeMsa()
      } else {
        this.renderUserDataLine()
      }
    },
    proChange (val) {
      this.getVerLists(val)
      this.channelOpts = this.channelList.filter(item1 => item1.app_id === val)
      this.queryParams.union_id = []
      this.queryParams.attr_id = []
      this.queryParams.version = []
    },
    renderUserDataLine () {
      const { time_range } = this.queryParams
      const params1 = {
        'data_source': this.metricsGroup.data_source,
        queries: [{
          filters: this.getFilters(),
          time_range: `${time_range[0]}T00:00:00 : ${time_range[1]}T23:59:59`,
          indicator: this.queryParams1.chartIndicator + '',
          granularity: this.metricsGroup.granularity,
          time_grain_sqla: 'P1D',
          group_by: this.group_by

        }]
      }
      this.loading1 = true
      getReportDatas(params1).then(res => {
        const list = res.data[0].result[0].data
        this.lineOption = {
          xdata: list.map(item => this.fmtTableDate(item.__timestamp, 'P1D')),
          series: list.reduce((arr, item) => {
            for (const key in item) {
              if (key === '__timestamp') continue
              const it = arr.find(t => t.name === key)
              const val = this.formatNumber(item[key], key)
              if (it) {
                it.data.push(val)
              } else {
                const obj = {
                  name: key,
                  type: 'line',
                  data: [val]
                }
                arr.push(obj)
              }
            }
            return arr
          }, [])
        }
      }).finally(() => {
        this.loading1 = false
      })
    },
    // 格式化表格日期
    fmtTableDate (date, type) {
      const d = new Date(date)
      let dateStr = parseTime(d, dateFmt)
      switch (type) {
        case '[P1D]': // 天
          dateStr += `（${'日一二三四五六'.charAt(d.getDay())}）`
          break
        case 'PIW': // 周
          dateStr += '（周）'
          break
        case 'P1M': // 月
          dateStr = dateStr.slice(0, 7) + '（月）'
          break
      }
      return dateStr
    },
    // 交易分析
    renderTradeMsa () {
      this.loading1 = true
      // const { time_range } = params
      // const dayDiff = (new Date(time_range[1]).getTime() - new Date(time_range[0]).getTime()) / 1000 / 60 / 60 / 24 + 1

      const { time_range } = this.queryParams
      const dayDiff = (new Date(time_range[1]).getTime() - new Date(time_range[0]).getTime()) / 1000 / 60 / 60 / 24 + 1
      const filters = this.getFilters()
      const params1 = {
        'data_source': this.metricsGroup.data_source,
        pre_cycle: true,
        queries: this.queryParams1.indicator.map(indicator => ({
          filters,
          time_range: `${time_range[0]}T00:00:00 : ${time_range[1]}T23:59:59`,
          indicator: indicator + '',
          granularity: this.metricsGroup.granularity,
          // time_grain_sqla: 'P1D',
          group_by: this.group_by,
          order_by: `${indicator} desc`
        })
        )

      }
      const list = this.queryParams1.indicator.map(indicator => ({
        filters,
        time_range: `${time_range[0]}T00:00:00 : ${time_range[1]}T23:59:59`,
        indicator: indicator + '',
        granularity: this.metricsGroup.granularity,
        operation: 'resample',
        resample_rule: dayDiff + 'D',
        resample_method: 'sum'
      })
      )
      params1.queries = params1.queries.concat(list)
      getReportDatas(params1).then(res => {
        const list = (Array.isArray(res.data[0].result) && res.data[0].result) || []
        const arr = list.splice(0, 4)
        this.tradeDataList = arr.map((item, index) => {
          const labelKey = item.colnames[0]
          const valKey = item.colnames[1]
          item.label = valKey
          item.number = list[index].data[0][valKey]
          item.prevNumber = list[index].data[0][valKey + '_pre']
          item.data = item.data.map(it => {
            const prevNumber = it[valKey + '_pre']
            const number = it[valKey]
            return {
              name: it[labelKey],
              number: this.formatNumber(number, valKey),
              prevNumber: this.formatNumber(prevNumber, valKey),
              linkRatio: toFixed((number - prevNumber) / prevNumber * 100, 2)
            }
          })
          item.linkRatio = toFixed((item.number - item.prevNumber) / item.prevNumber * 100, 2)
          item.number = this.formatNumber(item.number, valKey)
          return item
        })
      }).finally(() => {
        this.loading1 = false
      })
    },
    // 付费分析
    renderPayMsa () {
      // this.loading2 = true
      this.renderPayTable()
      const filters = this.getFilters()
      const { time_range } = this.queryParams
      const params1 = {
        'data_source': this.metricsGroup.data_source,
        // pre_cycle: true,
        queries: this.payIndicator.map(indicator => ({
          filters,
          time_range: `${time_range[0]}T00:00:00 : ${time_range[1]}T23:59:59`,
          indicator: indicator.value + '',
          granularity: this.metricsGroup.granularity,
          row_limit: 3,
          group_by: this.group_by,
          order_by: `${indicator.value} desc`
        })
        )
      }
      getReportDatas(params1).then(res => {
        const list = (Array.isArray(res.data[0].result) && res.data[0].result) || []
        this.payDataList = list.map(item => {
          const labelKey = item.colnames[0]
          const valKey = item.colnames[1]
          item.label = valKey
          item.data = item.data.map(it => ({
            name: it[labelKey]
          }))
          return item
        })
      })
    },
    // 付费分析表格
    renderPayTable () {
      this.loading2 = true
      const { time_range } = this.queryParams
      const indicator = this.tableKeys2.slice(2).map(t => t.prop).join(',')
      const dayDiff = (new Date(time_range[1]).getTime() - new Date(time_range[0]).getTime()) / 1000 / 60 / 60 / 24 + 1
      const filters = this.getFilters()
      const params1 = {
        'data_source': this.metricsGroup.data_source,
        pre_cycle: true,
        queries: [
          {
            filters,
            time_range: `${time_range[0]}T00:00:00 : ${time_range[1]}T23:59:59`,
            indicator: indicator,
            granularity: this.metricsGroup.granularity,
            operation: 'resample',
            resample_rule: dayDiff + 'D',
            // time_grain_sqla: 'P1D',
            // group_by: this.group_by,
            resample_method: 'sum'

          }, {
            filters,
            time_range: `${time_range[0]}T00:00:00 : ${time_range[1]}T23:59:59`,
            indicator: indicator,
            granularity: this.metricsGroup.granularity,
            operation: 'resample',
            resample_rule: dayDiff + 'D',
            time_grain_sqla: 'P1D',
            // group_by: this.group_by,
            resample_method: 'mean'

          }, {
            filters,
            time_range: `${time_range[0]}T00:00:00 : ${time_range[1]}T23:59:59`,
            indicator: indicator,
            granularity: this.metricsGroup.granularity,
            // time_grain_sqla: 'P1D',
            group_by: this.group_by,
            order_by: this.queryParams2.order_by
          }
        ]

      }
      getReportDatas(params1).then(res => {
        const list = (Array.isArray(res.data[0].result) && res.data[0].result) || []
        const sumData = list[0]?.data[0]
        const meanData = list[1]?.data[0]
        const tableData = (list[2]?.data || []).map((item, i) => {
          item.index = i + 1
          return item
        })
        sumData[this.group_by] = '汇总（环比）'
        meanData[this.group_by] = '平均（环比）'
        this.payTableList = [sumData, meanData, ...tableData]
      }).finally(() => {
        this.loading2 = false
      })
    },
    // 用户规模及质量
    renderUserMsa () {
      this.renderUserChart()
      this.renderUserTable()
    },
    // 用户规模及质量表格
    renderUserTable () {
      this.loading3 = true
      const { time_range } = this.queryParams
      const indicator = this.tableKeys3.slice(2).map(t => t.prop).join(',')
      const dayDiff = (new Date(time_range[1]).getTime() - new Date(time_range[0]).getTime()) / 1000 / 60 / 60 / 24 + 1
      const filters = this.getFilters()
      const params1 = {
        'data_source': this.metricsGroup.data_source,
        pre_cycle: true,
        queries: [
          {
            filters,
            time_range: `${time_range[0]}T00:00:00 : ${time_range[1]}T23:59:59`,
            indicator: indicator,
            granularity: this.metricsGroup.granularity,
            operation: 'resample',
            resample_rule: dayDiff + 'D',
            // time_grain_sqla: 'P1D',
            // group_by: this.group_by,
            resample_method: 'sum'

          }, {
            filters,
            time_range: `${time_range[0]}T00:00:00 : ${time_range[1]}T23:59:59`,
            indicator: indicator,
            granularity: this.metricsGroup.granularity,
            operation: 'resample',
            resample_rule: dayDiff + 'D',
            time_grain_sqla: 'P1D',
            // group_by: this.group_by,
            resample_method: 'mean'

          }, {
            filters,
            time_range: `${time_range[0]}T00:00:00 : ${time_range[1]}T23:59:59`,
            indicator: indicator,
            granularity: this.metricsGroup.granularity,
            // time_grain_sqla: 'P1D',
            group_by: this.group_by,
            order_by: this.queryParams3.order_by
          }
        ]
      }
      getReportDatas(params1).then(res => {
        const list = (Array.isArray(res.data[0].result) && res.data[0].result) || []
        const sumData = list[0]?.data[0]
        const meanData = list[1]?.data[0]
        const tableData = (list[2]?.data || []).map((item, i) => {
          item.index = i + 1
          return item
        })
        sumData[this.group_by] = '汇总（环比）'
        meanData[this.group_by] = '平均（环比）'
        this.userTableList = [sumData, meanData, ...tableData]
      }).finally(() => {
        this.loading3 = false
      })
    },
    renderUserChart () {
      const params = {
        ...this.queryParams,
        ...this.queryParams3
      }
      const { time_range } = params
      const d1 = new Date(time_range[0])
      const d2 = new Date(time_range[1])
      const dayDiff = (d2.getTime() - d1.getTime()) / 1000 / 60 / 60 / 24 + 1
      this.userDataList = []
      this.getChartData({
        ...params,
        chart: 'big_number',
        operation: 'resample',
        resample_rule: dayDiff + 'D',
        resample_method: 'sum',
        indicator: this.userIndicator.map(t => t.value)
      }).then(res => {
        const data = Array.isArray(res.data[0].result) && res.data[0].result[0].data[0]
        const list = []
        if (data) {
          list.push(...this.userIndicator.map(t => {
            return {
              ...t,
              ratio: toFixed(data[t.label] * 100)
            }
          }))
        }
        this.userDataList = list
      }).catch(() => {
      })
    },
    getFilters () {
      const params = this.queryParams
      let filters = `app_id in (${params.app_id})`
      if (params.version.length) {
        filters += ` and version in (${params.version})`
      }
      if (params.union_id.length) {
        filters += ` and union_id in (${params.union_id})`
      }
      if (params.attr_id.length) {
        filters += ` and attr_id in (${params.attr_id})`
      }
      return filters
    },
    cellClassName ({ row, column, rowIndex, columnIndex }) {
      row.rowIndex = rowIndex
      column.columnIndex = columnIndex
    },
    // 付费分析表格点击（渠道详情）
    cellClickHandler (row, column, cell, event, type) {
      if (row.rowIndex < 2 || column.columnIndex !== 1) return
      const indicator = this['tableKeys' + type].slice(2)
      this.detail.title = `${row.union_id}渠道详情`
      this.detail.width = (type === 2 ? 62 : 54) + '%'
      this.detail.fileName = `${row.union_id}的${type === 2 ? '付费分析' : '用户规模及质量'}`
      this.detail.tableKeys = [{
        label: '时间',
        prop: 'time',
        sortable: true,
        minWidth: 144
      },
      ...indicator.map(t => ({
        ...t,
        sortable: true,
        minWidth: 120
      }))]
      this.detail.params = {
        ...this.queryParams,
        ...this['queryParams' + type],
        indicator: indicator.map(t => t.prop),
        // indicatorName: this.data.label,
        union_id: row.channel_id,
        union_name: row.name
      }
      this.detail.visible = true
    },
    // 表格排序
    sortChange ({ column, prop, order }, type) {
      const order_by = order ? prop + ' ' + order.slice(0, -6) : ''
      if (type === 2) {
        this.queryParams2 = {
          ...this.queryParams2,
          order_by
        }
        this.renderPayTable()
      } else if (type === 3) {
        this.queryParams3 = {
          ...this.queryParams3,
          order_by
        }
        this.renderUserTable()
      }
    },
    // 渠道详情
    viewDetails (params = {}, type = 1) {
      this.detail.width = '50%'
      this.detail.fileName = `${params.union_name}（${params.union_id}）的${params.indicatorName}`
      this.detail.tableKeys = [{
        label: '时间',
        prop: 'time',
        sortable: true
      },
      {
        label: params.indicatorName,
        prop: params.indicator + '',
        sortable: true
      }]
      this.detail.params = {
        ...this.queryParams,
        ...this['queryParams' + type],
        ...params
      }
      this.detail.visible = true
    },
    getAllRights () {
      Axios.all([listRightPackage({ page: 1, page_size: 100, status: 10 }), getRightPackage()]).then(Axios.spread((res1, res2) => {
        const rightMap = (res1.data.list || []).reduce((map, t) => {
          map[t.pkg_id] = t.package_id
          return map
        }, {})
        this.allpackages = (res2.data.list || []).map(t => ({
          ...t,
          label: t.name,
          value: rightMap[t.pkg_id]
        })).filter(t => t.value)
      }))
    },
    getVerLists (app_id) {
      getVersionTree({ app_id, is_test: false })
        .then(res => {
          let list = res.data || []
          this.versionOpts = list
        })
    }
  },
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList']),
    payIndicator () {
      return payIndicator.map(label => ({
        label,
        value: this.indicatorList.find(t => t.label === label)?.value
      }))
    },
    userIndicator () {
      const it = this.indicatorOpts.find(t => t.label === '用户质量')
      return it ? it.children.filter(t => !t.totalHide) : []
    },
    tableKeys2 () {
      const list = this.indicatorList.filter(t => payColumns.includes(t.label)).map(t => ({
        ...t,
        prop: String(t.value),
        sortable: 'custom'
      }))
      list.unshift(this.tableKeyGroup)
      list.unshift({
        label: '序号',
        prop: 'index',
        width: 50,
        keepOrigin: true
      })
      return list
    },
    tableKeys3 () {
      // eslint-disable-next-line sonarjs/no-identical-functions
      const list = this.indicatorList.filter(t => userColumns.includes(t.label)).map(t => ({
        ...t,
        prop: String(t.value),
        sortable: 'custom'
      }))
      list.unshift(this.tableKeyGroup)
      list.unshift({
        label: '序号',
        prop: 'index',
        width: 50,
        fixed: 'left',
        keepOrigin: true
      })
      return list
    },
    tableKeyGroup () {
      if (this.group_bys === 'union_id') {
        return ({
          label: '渠道',
          prop: 'union_id',
          keepOrigin: true,
          notNumber: true
        })
      } else {
        return ({
          label: '版本',
          prop: 'version',
          keepOrigin: true,
          notNumber: true
        })
      }
    },
    rowClassName ({ row, rowIndex }) {
      if ([0, 1].includes(rowIndex)) return 'emphasize'
      return ''
    },
    packageOpts () {
      let { app_id: appId } = this.queryParams
      if (!appId) return []
      appId = parseInt(appId)
      return this.allpackages.filter(t => t.app_id === appId)
    }
  }
}
</script>

<style lang="scss" scoped>
.channel-anal {
  display: flex;
  padding: 16px;
  overflow: hidden;
  flex-direction: column;
  background-color: #eee;
  .terms {
    padding: 12px;
    margin-bottom: 16px;
    background-color: #fff;
    &_top {
      display: flex;
      justify-content: space-between;
    }
    .condition {
      margin-top: 12px;
      overflow: hidden;
      transition: height .3s ease-in-out;
      justify-content: space-between;
    }
  }
  .scroll {
    flex: 1;
    overflow-y: auto;
  }
  .condition {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .filters {
      .filter {
        margin-right: 20px;
        &:last-of-type {
          margin-right: 0;
        }
        .label {
          margin-right: 10px;
        }
      }
      .el-date-editor {
        width: 300px;
      }
    }
  .section {
    display: flex;
    padding: 12px;
    flex-direction: column;
    margin-bottom: 16px;
    background-color: #fff;
    min-height: 512px;
    .headline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      margin: 0 -12px 10px;
      border-bottom: 1px solid #ddd;
      .title {
        font-size: 18px;
        font-weight: bold;
      }
    }

    .content {
      flex: 1;
    }
  }
  .trade-stats {
    display: flex;
    .trade-chunk {
      width: 25%;
    }
  }
  .pay-rank {
    display: flex;
    min-height: 166px;
    .pay-rank_chunk {
      flex: 1;
      padding: 16px;
      .title {
        font-size: 16px;
        color: #999;
        margin-bottom: 6px;
      }
      .rank-list_item {
        display: flex;
        align-items: center;
        padding: 6px 0;
        .svg-icon {
          font-size: 24px;
          margin-right: 16px;
        }
      }
    }
  }
  .pay-table,
  .user-table {
    /deep/ .el-table {
      tbody .el-table__row {
        &:not(.emphasize) td:nth-of-type(2) {
          .cell {
            cursor: pointer;
            &:hover {
              color: #409eff;
            }
          }
        }
      }
    }
  }
  .fold-box {
    display: flex;
    padding: 6px 0;
    justify-content: flex-end;
    .fold {
      display: flex;
      font-size: 16px;
      cursor: pointer;
      align-items: center;
      &:hover {
        color: #00bbd7;
        .mark {
          border-bottom-color: #00bbd7;
        }
      }
      .mark {
        margin: 0 6px;
        border-width: 6px;
        border-style: solid;
        transition: all 0.3s;
        transform: translateY(-25%);
        border-color: transparent transparent rgba($color: #000, $alpha: 0.5)
          transparent;
        &.fold {
          transform: rotate(180deg) translateY(-25%);
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-popper.indic-popover {
  .indic-options {
    .tips {
      color: #fc6772;
      margin-bottom: 8px;
    }
    .indic-group {
      display: flex;
      line-height: 2;
      .group-label {
        flex: 70px 0 0;
        font-size: 14px;
      }
      .indic-checkbox {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
      }
    }
    .btns {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>
